<template>
  <div id="main" style="width: 800px; height: 400px"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data(){
        return {
            option :{
                title: {
                    text: '近七天访问商品足迹图'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["2021-01-21","2021-01-22","2021-01-23","2021-01-24","2021-01-25","2021-01-26"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [
                        {
                            value:25,
                            itemStyle:{
                                color:'#bfa'
                            }
                        },
                        {
                            value:100,
                            itemStyle:{
                                color:'pink'
                            }
                        }, 
                        {
                            value:44,
                            itemStyle:{
                                color:' rgba(186, 238, 90, 0.76)'
                            }
                        },
                        {
                            value:15,
                            itemStyle:{
                                color:'rgba(30, 169, 173, 0.76)'
                            }
                        },
                        {
                            value:73,
                            itemStyle:{
                                color:'rgba(79, 117, 199, 0.76)'
                            }
                        },
                        {
                            value:55,
                            itemStyle:{
                                color:'rgba(229, 95, 241, 0.76)'
                            }
                        }]
                }]
            }
        }
    },
    methods:{
        init(){
            var myChart = echarts.init(document.getElementById('main'));
             myChart.setOption(this.option);
        }
    },
    mounted(){
        this.init()
    }
}
</script>

<style scoped>
#main{
    margin: 0px auto ;
    margin-top: 50px;
    color: rgba(229, 95, 241, 0.76);
}
</style>